bootstrap table查询搜索配置

#bootstrap table查询搜索配置| 来源: 网络整理| 查看: 265

bootstrap table查询搜索指的是表格内容前端搜索，而不是查询数据库进行搜索，如果要对数据库服务端进行搜索可以queryParams属性相对应的教程。bootstrap table表格搜索可以通过以下属性进行设置。

属性名称值说明 search true 开启搜索输入框 searchOnEnterKey true 回车后执行搜索 strictSearch true 完全匹配搜索，不是like模糊查询 trimOnSearch true 自动去除关键词两边空格 searchAlign left/right left搜索框在左边 right在右边 searchTimeOut 1000 设置搜索超时时间，数据量很大时才有用 searchText 字符串初始化时默认搜索的关键词 customSearch 自定义方法自定义搜索 search开启搜索框 //bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, //******开启搜索框****// search:true }); searchOnEnterKey回车后执行搜索 //bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:true, //******回车后执行搜索****// });

在线试一试

strictSearch完全匹配 //bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true //******完全匹配****// });

trimOnSearch去除关键词空格 //bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true //去除关键词空格// }); searchAlign搜索框位置 //bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true, //去除关键词空格// searchAlign:"left" }); searchText默认搜索关键词 //bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true, //去除关键词空格// searchAlign:"left", searchText:"苹果" }); customSearch自定义搜索 //bootstrap table初始化数据// $('#table').bootstrapTable({ columns: columns, data: getData(), classes: "table table-bordered table-striped table-sm table-dark", height:400, search:true, //******开启搜索框****// searchOnEnterKey:false, //******回车后执行搜索****// strictSearch:true, //******完全匹配****// trimOnSearch:true, //去除关键词空格// searchAlign:"left", customSearch:customSearch,//自定义搜索，比如只搜索ID字段 }); function customSearch(data, text) { return data.filter(function (row) { return (row.Id+"").indexOf(text) > -1 }) }

【本文地址】

公司简介

联系我们